<template>
  <div id="login">
    <div class="login_inp">
      <h4>物业管理</h4>
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item
          label="账号"
          style="
            max-width: 400px;
            margin: 20px auto;
            transform: translate(-5%);
          "
        >
          <el-input
            v-model="formLabelAlign.name"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          class="password"
          style="
            max-width: 400px;
            margin: 20px auto;
            transform: translate(-5%);
          "
        >
          <i class="el-icon-view" @click="changetype()"></i>
          <el-input
            v-model="formLabelAlign.region"
            :type="bool ? 'password' : 'text'"
            placeholder="请输入密码"
          ></el-input>
            <!-- <div>{{msg}}</div> -->
<!--            <slide-verify :l="42"
            :r="10"
            :w="310"
            :h="155"
            slider-text="向右滑动"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
            ></slide-verify>-->
        </el-form-item>
        
        <el-button
          type="primary"
          style="width: 100px; margin-right: 50px"
          @click="logining()"
          >登录</el-button
        >
        <el-button type="success" @click="no()" style="width: 100px"
          >取消</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script>
// import { loginin } from "../apis/rrk/link.js";
// import addrouter from "@/utils/addrouter";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      labelPosition: "right",
      username:"admin",
      password:"123456",
      token:"klhlhdwnlskjdhjanjkcnkjshawkdjsdjk",
      formLabelAlign: {
        name: "",
        region: "",
      },
      bool: true,
      msg: true,
    };
  },
  methods: { 
    onSuccess(){
                this.msg = true
            },
            onFail(){
                this.msg = false
            },
            onRefresh(){
                this.msg = ''
            },
    ...mapMutations(["UP_ROUTERLIST"]),
    changetype() {
      this.bool = !this.bool;
    },
    no() {
      this.formLabelAlign.name = "";
      this.formLabelAlign.region = "";
    },
    logining() {
      // loginin(this.formLabelAlign.name).then((res) => {
      //   console.log(res);
      //   this.UP_ROUTERLIST(res.data.routerdata)
      //   if (res.data.userid==0) {
      //     this.$message({
      //     message: '欢迎您，管理员',
      //     type: 'success'
      //   })
      //   addrouter(res.data.routerdata,this.$router)
      //   } else {
      //     this.$message({
      //     message: '欢迎您，用户',
      //     type: 'success'
      //   })
      //   }
      //   // this.$router.push("/home/"+res.data.routerdata[0].path)
        
      // });
      if(this.formLabelAlign.name==this.username&&this.formLabelAlign.region==this.password&&this.msg==true){
        this.$message({
        message: '登录成功',
          type: 'success'})
          sessionStorage.setItem('token',this.token)
          this.$router.push("/home/shouye")
      }else{
        this.$message.error('登陆失败')
      }
      
    },
  },
  mounted() {
    // login("admin",123456,1).then((res)=>{console.log(res);})
  },
  created () {
    //判断是否有store这个本地存储的数据
    if (sessionStorage.getItem("store") ) {
      // 如果有  那么把vuex的数据替换  把当前的state  和上次刷新存储的state合并起来
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
        sessionStorage.removeItem("store")
    } 
 
    //在页面监听绑定一个beforeunload事件（页面刷新事件）
    // 当页面刷新的时候使用本地存储存一个store的数据  把vuex的数据全部取出来 转成字符串存起来
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
};
</script>

<style scoped lang="scss">
.slide-verify{
  margin-top: 25px;
}
#login {
  height: 100%;
  width: 100%;
  background: url(../../public/bg.jpg) no-repeat;
  background-size: 100% 100%;
  .login_inp {
    position: absolute;
    top: 30%;
    left: 53%;
    width: 40%;
    min-width: 100px;
    height: 400px;
    background: null;
    text-align-last: center;
    h4 {
      color: #000;
      font-size: 30px;
      margin-bottom: 20px;
    }
    .el-input__inner {
      width: 200px;
    }
  }
  .password {
    position: relative;
    .el-icon-view {
      position: absolute;
      z-index: 9;
      right: 10px;
      top: 12px;
    }
  }
}
</style>